import { Form,Icon,Input, Select,Button, Radio } from "antd";
import React from "react";
import styles from "../../index.less"

class EndNode extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initForm = data => {
    this.props.form.setFieldsValue({label:data.label})
  }

  checkSave = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        let obj = {
          label:values.label
        }
        this.props.doSave(obj)
      }
    })
  }

  render(){
    const { form:{getFieldDecorator} } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    return(
      <Form {...formItemLayout}>
        <div className={styles.formTitle}><Icon style={{ transform: "rotate(90deg)" }} type='minus' />基本信息</div>
        <Form.Item label="节点名称">
          {
            getFieldDecorator("label",{rules:[{required:true,message:"请输入"}]})(
              <Input className={styles.inputItem} />
            )
          }
        </Form.Item>
        <Form.Item label=" " colon={false}>
          <Button type="primary" onClick={this.checkSave}>保存</Button>
        </Form.Item>
      </Form>
    )
  }
}

export default Form.create()(EndNode)